<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <el-input v-model="page.param.sub_name" placeholder="请输入资源名" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
      <el-button type="info" style="margin-left: 5px" @click="reset">重置</el-button>
      <el-upload :action="'http://150.158.87.29:9090/submit-resouse/upload'" :show-file-list="false" :before-upload="beforeupload"
                 :on-success="handleFileUploadSuccess" style="display: inline-block; margin-left: 5px">
<!--        <el-button type="primary" style="padding-right:10px">上传</el-button>-->
      </el-upload>
    </div>

    <div style="margin: 0 0 10px">
      <el-row>
        <el-col :span="4" v-for="(item) in state.tableData" :key="item.subId">
          <el-card shadow="hover" style="width:200px; height: 300px; margin-top: 20px" >
            <img src="http://rxs18bfmd.hd-bkt.clouddn.com/wenjian.png"  alt="image" style="height: 120px"><br>
            <h5 class="time" :title="item.subName">{{item.subName}}</h5><br>
            <text class="time">提交人:{{item.stuName}}</text><br>
            <text class="time">团队名:{{item.teamName}}</text><br>
            <text class="time">提交时间:<br>{{item.subTime}}</text>
            <el-row>
<!--              <el-button type="text" class="button" @click="del(item.subName)">删除</el-button>-->
              <el-button type="text" class="button" @click="downloadFile(item.subId)"><span style="align-self: center">下载</span></el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="padding: 10px">
      <el-pagination
          background
          v-model:current-page="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="[5, 10, 15]"
          large
          :disabled="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/request";
import {ElMessage, ElNotification} from "element-plus";


const load = () => {
  request.post('/submit-resouse/listPage',JSON.stringify(page)).then(res=>{
    console.log(res.data)
    if(res.code===200) {
      console.log(res)
      state.tableData = res.data
      state.total=res.total
    }
  })
}

const page=reactive({
  pageNum:ref(1),
  pageSize:ref(10),
  param:{
    sub_name:ref()
  }
})
//刷新页面
load()
//页数
const handleSizeChange=(val)=>{
  page.pageSize=val
  load()
}
//每页数量
const handleCurrentChange=(val)=>{
  page.pageNum=val
  load()
}

const reset=()=>{
  page.param.sub_name="";
  load()
}

const state=reactive({
  userId:"",
  filename:"",
  fileurl:""
})

const beforeupload=(file)=>{
  console.log(file)
  state.filename=file.name
}


const handleFileUploadSuccess=(res)=>{
  state.userId=(localStorage.getItem("student") ? JSON.parse(localStorage.getItem("student")) : {}).stuId
  state.fileurl=res.data
  console.log(state.userId)
  console.log(state.filename)
  console.log(state.fileurl)

  request.get('/submit-resouse/insert',{params:{
      stu_id:state.userId,
      originalFilename:state.filename,
      fileUUID:state.fileurl
    }}).then(res=>{
    if(res.code===200){
      ElNotification({
        type:"success",
        message:"上传成功"
      })
    }
    load()
  })
}

const downloadFile = (subId) =>{
  request.get('/submit-resouse/getUrl',{params:{sub_id:subId}}).then(res=>{
    console.log(res)
    if(res.code===200){
      window.open(res.data)
      setTimeout(() => {
        // 方法区
        load()
      }, 300)
    }
  })
}

const del = (subId) => {
  request.get('/submit-resouse/del',{params:{sub_id:subId}}).then(res=>{
    if(res.code===200){
      ElNotification({
        type:"success",
        message:"删除成功"
      })
      load()
    }
  })
}

</script>

<style>
.img{
  width: 100%;
  height:50%;
  display: flex;
  /*display: block;*/
}
.time {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #999;
  /*text-align: center;*/
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button{
  align-content: center;
}

</style>
